<template>
	<view class="gold-page">
		<view class="top-box">
			<image class="bg" src="@/static/gold.jpg" mode="aspectFill"></image>
			<view class="box">
				<view class="total">
					<view class="label">可用{{ config.trade_currency_2 }}</view>
					<view class="value">{{ total }}</view>
				</view>
				<view class="data">
					<view class="item">
						<view class="label">今日收入</view>
						<view class="value">+{{ day_ru }}</view>
					</view>
					<view class="item">
						<view class="label">本月收入</view>
						<view class="value">+{{ month_ru }}</view>
					</view>
					<view class="item">
						<view class="label">本月支出</view>
						<view class="value">-{{ month_chu }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="look-box">
			<text>完成推三返一可获得更多{{ config.trade_currency_2 }}</text>
			<text class="look" @click="goFoldback">去查看</text>
		</view>
		<view class="tabs-box">
			<view class="item" :class="{ 'active': tabCurrent == 0 }" @click="tabChange(0)">全部</view>
			<view class="item" :class="{ 'active': tabCurrent == 1 }" @click="tabChange(1)">收入</view>
			<view class="item" :class="{ 'active': tabCurrent == 2 }" @click="tabChange(2)">支出</view>
		</view>
		<view class="list-box" v-if="list.length">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="left">
					<view class="title">{{ item.info }}</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view class="value" v-if="item.num > 0">+{{ item.num }}</view>
				<view class="value" v-else>{{ item.num }}</view>
			</view>
			
			<u-loadmore :status="status" />
		</view>
		<view class="empty-box" v-else>
			<u-empty mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import { getCommissionInfo, getConfig } from '@/api/api.js'
	
	export default {
		data () {
			return {
				total: 0, // 总金额
				day_ru: 0, //今日收入
				month_ru: 0, //本月收入
				month_chu: 0, //本月支出

				tabCurrent: 0,
				
				config: {},
				
				list: [],
				/* 分页 */
				status: 'loadmore',
				page: 0,
				last_page: 1,
			}
		},
		onLoad () {
			this.loadData()
			
			getConfig().then(res => {
				if (res) {
					this.config = res.data
				}
			})
		},
		onReachBottom () {
			this.getListData()
		},
		methods: {
			loadData () {
				this.page = 0
				this.last_page = 1
				this.list = []
				this.getListData()
			},
			async getListData () {
				if(this.page >= this.last_page) return
				
				this.status = 'loading'
				this.page = ++this.page
				
				const req = await getCommissionInfo({
					page: this.page,
					page_size: 10,
					status: this.tabCurrent
				})
				
				if (req) {
					this.list = this.list.concat(req.data.data.data)
					this.last_page = req.data.data.last_page
					
					this.total = req.data.total
					this.day_ru = req.data.day_ru
					this.month_ru = req.data.month_ru
					this.month_chu = req.data.month_chu
					
					if (this.page >= this.last_page) {
						this.status = 'nomore'
					} else {
						this.status = 'loading'
					}
					
					return ''
				}
			},
			tabChange (index) {
				this.tabCurrent = index
				
				this.list = []
				this.loadData()
			},
			goFoldback () {
				uni.navigateTo({
					url: '/pages/my/foldback'
				})
			}
		}
	}
</script>

<style lang="scss">
.gold-page {
	.top-box {
		position: relative;
		.bg {
			width: 750rpx;
			height: 366rpx;
		}
		.box {
			position: absolute;
			top: 46rpx;
			left: 46rpx;
			right: 46rpx;
			z-index: 10;
			color: #fff;
			.total {
				.label {
					font-size: 24rpx;
				}
				.value {
					font-size: 54rpx;
					font-weight: bold;
				}
			}
			.data {
				margin-top: 62rpx;
				display: flex;
				justify-content: space-between;
				.item {
					.label {
						color: #f6ebde;
						font-size: 24rpx;
					}
					.value {
						margin-top: 8rpx;
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
	.look-box {
		height: 92rpx;
		color: #333;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		line-height: 92rpx;
		background-color: #faebda;
		.look {
			text-decoration: underline;
		}
	}
	.tabs-box {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: center;
		.item {
			width: 200rpx;
			height: 80rpx;
			color: #000;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
			position: relative;
			&.active {
				font-weight: bold;
				&::before {
					content: '';
					display: block;
					width: 62rpx;
					height: 6rpx;
					border-radius: 6rpx;
					background-color: #333;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.list-box {
		padding: 0 60rpx;
		.item {
			padding: 32rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:not(:last-child) {
				border-bottom: 1rpx solid #eee;
			}
			.left {
				flex: 1;
				.title {
					font-size: 28rpx;
				}
				.time {
					margin-top: 16rpx;
					color: #666;
					font-size: 24rpx;
				}
			}
			.value {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.empty-box {
		margin-top: 160rpx;
	}
}
</style>
